<script setup lang="ts">
import {onMounted, ref} from "vue";
import myAxios from "../../plugins/MyAxios.ts";
import {showConfirmDialog, showFailToast, showSuccessToast} from "vant";

const onClickLeft = () => history.back();
const isEmpty = ref<boolean>();
const teamList = ref();
const userId = ref()
const leaderAvatarUrl = ref<string>();
async function getTeamList() {
  try {
    const userInfo = sessionStorage.getItem('userInfo');
    if (userInfo === null) {
      const result = await myAxios.get('/user/current');
      userId.value = result.data.data.id;
      leaderAvatarUrl.value = result.data.data.avatarUrl;
      sessionStorage.setItem('userInfo', JSON.stringify(result.data.data));
    } else {
      const info = JSON.parse(userInfo)
      userId.value = info.id
      leaderAvatarUrl.value = info.avatarUrl
    }
    const response = await myAxios.post('/team/get/list/join')
    teamList.value = response.data.data
    isEmpty.value = teamList.value.length === 0;
  } catch (e) {
    console.log(e)
  }
}

onMounted(async () => {
  await getTeamList()
})

const isShow = ref<boolean>(false);
const teamId = ref<number>();
const teamName = ref<string>();
const leaderName = ref<string>();
const maxNum = ref<number>();
const teamStatus = ref<string>();
const curNum = ref<number>();
const expireTime = ref();
const showDetailTeamInfo = (item: any) => {
  teamId.value = item.id;
  isShow.value = true;
  teamName.value = item.name;
  leaderName.value = item.creatUser.username;
  maxNum.value = item.maxNum;
  curNum.value = item.curNum;
  teamStatus.value = formatTeamStatus(item.status)
  expireTime.value = item.expireTime;
}

function formatTeamStatus(status : number){
  switch (status) {
    case 0 : return '公开';
    case 1 : return '私密';
    case 2 : return '加密';
  }
}

const quitTeam = () => {
  showConfirmDialog({
    title: '是否确认退出队伍',
    message:
        '您确定要退出当前队伍吗？一旦退出，您将失去与队伍共同前行的机会，再次加入可能需要重新申请，还请谨慎决定！',
  })
      .then(async () => {
        try {
          const result = await myAxios.post('/team/quitTeam', {
            teamId: teamId.value
          });
          if (result.data.code === 200) {
            isShow.value = false;
            showSuccessToast('已退出队伍');
            await getTeamList();
          }
        } catch (e) {
          isShow.value = false;
          showFailToast('队伍退出失败')
          console.log(e)
        }
      })
      .catch(() => {
        return;
      });
}
</script>

<template>
  <van-nav-bar title="麦语伙伴" left-text="返回" left-arrow @click-left="onClickLeft" />
  <van-empty v-if="isEmpty" description="你还没有加入队伍" />
  <div v-if="!isEmpty">
    <div v-for="item in teamList" :key="item.id">
      <van-swipe-cell>
        <van-cell :border="false" :title="item.name" size="large" value="左滑查看详细信息"/>
        <template #right>
          <van-button square type="primary" text="查看" @click="showDetailTeamInfo(item)"/>
        </template>
      </van-swipe-cell>
    </div>
  </div>

  <van-popup
      v-model:show="isShow"
      closeable
      position="bottom"
      :style="{ height: '60%' }"
  >
    <div style="margin-top: 35px">
      <van-cell-group inset>
        <van-cell title="队伍名称" :value="teamName" />
        <van-cell title="队长" :value="leaderName" />
        <van-cell title="当前人数" :value="curNum" />
        <van-cell title="最大人数" :value="maxNum" />
        <van-cell title="房间类型" :value="teamStatus" />
        <van-cell title="队伍过期时间" :value="expireTime" />
        <div style="margin: 16px">
          <van-button round block type="danger" @click="quitTeam">退出队伍</van-button>
        </div>
      </van-cell-group>
    </div>
  </van-popup>
</template>

<style scoped>

</style>